<template>
  <div class="" style="">
    <div class="distribution bCFF">
      <div class="distribution_title ">Способ доставки</div>
      <div class="distribution_view mTop12 cFF">
        <div class="distribution_view_left">
          <div class="mTop8 items ">
            <img class="" src="/src/assets/icons/order/account_img.png" alt="">
            <div class="mLeft8 fs16 items">
              <div>{{ orderDetial.address_people_txt }}</div>
              <div class="mLeft10">{{ orderDetial.address_people_txt }}</div>
            </div>
          </div>
          <div class="mTop8 fs14">
            Адрес: {{ orderDetial.address_param }}
          </div>
        </div>
        <div class="distribution_view_right items">
          <img class="" src="/src/assets/icons/order/update_address.png" alt="">
          <div class="mLeft6" @click="editAddressFun">Изменения</div>
        </div>
      </div>
    </div>
    <div class="order bCFF mTop16">
      <div class="table">
        <div class="items tr">
          <div class="td_1">Стоимость единицы</div>
          <div class="td_2">Спецификация</div>
          <div class="td_3">Количество</div>
          <div class="td_4">Стоимость единицы</div>
        </div>
        <div class="items tr_1" v-for="(item, index) in (orderDetial.order_goods as IOrderGoods[])" :key="`goods-${index}`">
          <div class="th_1">
            <img :src="item.first_img" alt="">
            <div>{{ item.subject_trans }}</div>
          </div>
          <div class="th_2 ">{{ item.attribute_name_trans }}</div>
          <div class="th_3">×{{ item.quantity }}</div>
          <div class="th_4">{{ item.price_one_ruble }}₽</div>
        </div>
      </div>
    </div>
    <div class="xiangqing bCFF mTop16">
      <div class="title">
        <img src="/src/assets/image/shuju.png" alt="">
        <div class="text">Разбивка расходов</div>
      </div>
      <div class="listBox">
        <div class="item" v-for="(item, index) in feeTypeList" :key="`feeType-${index}`">
          <div class="name">{{ item.translated_name }}</div>
          <div class="text">₽{{ item.fee }}</div>
        </div>
      </div>
    </div>
    <div class="tedxing bCFF mTop16">
      <div class="title">
        <img src="/src/assets/image/shuju.png" alt="">
        <div class="text">Информация о заказе</div>
      </div>
      <div class="listBox">
        <div class="item" v-for="(item, index) in orderDetial.infoList" :key="`info-${index}`">
          <div class="name">{{item.translated_name}}：</div>
          <div class="text">{{ item.val }}</div>
        </div>
      </div>
    </div>
    <!-- 底部操作栏 -->
    <div class="BtnBox bCFF mTop16">
      <div class="top btn">Торговцы</div>
      <div class="otm btn">Отменить</div>
      <div class="hem btn">Немедленная оплата</div>
    </div>
  </div>
</template>

<script lang="ts" name="Shopping_list" setup>
// 组件传来的值
import {ref, reactive, computed, onMounted, defineProps} from "vue";
import {ArrowRight} from "@element-plus/icons-vue";
import { getOrderDetail } from "@/api/api"
import type { IOrderDetail, IOrderGoods, IBuyTypeInfo } from "@/types/view/order"

const props = defineProps({
  orderId: {
    type: Number,
    default: 0,
  },
})

const orderDetial = ref<IOrderDetail>({
  order_goods: [] as IOrderGoods[],
  order_no: "",
  total_price: "",
  order_price: 0,
  pay_price: 0,
  add_services_price: 0,
  customs_price: 0,
  total_success_amount: 0,
  post_fee: 0,
  order_status: 0,
  user_id: 0,
  notes: "",
  pay_time: 0,
  send_time: 0,
  get_time: 0,
  address_id: 0,
  delivery_type_id: 0,
  cancel_reason_id: 0,
  coupon_id: 0,
  coupon_reduce_price: 0,
  vip_price: 0,
  buy_type: 0,
  use_balance: 0,
  balance_price: 0,
  pay_image: "",
  order_type: 0,
  order_id: 0,
  express_price: 0,
  address_param: "",
  address_people_txt: "",
  has_comment: 0,
  buy_type_info: {} as IBuyTypeInfo,
  delivery_type: [],
  again: null,
  can_refuse: 0,
  feeTypeList: {},
  create_at: "",
  update_at: "",
  infoList: []
})

const feeTypeList = computed(() => {
  if(!Object.keys(orderDetial.value?.feeTypeList).length) {
    return []
  }
  const feeTypeMap =  orderDetial.value?.feeTypeList as any
  return [feeTypeMap['orderAmmount'], 
    feeTypeMap['productAmmount'], 
    feeTypeMap['customsFee'],  
    feeTypeMap['postFee']]
})

onMounted(() => {
  getDetailFun()
})


const getDetailFun = () => {
  if (props.orderId) {
    getOrderDetail(props.orderId).then((res: any) => {
      if (res.errCode === 0) {
        orderDetial.value = res.returnData as IOrderDetail
      }
    })
  }
}

const editAddressFun = () => {

}

function handleChange() {

}

</script>
<script lang="ts" scope>
export default {
  name: 'Home'
}
</script>

<style lang="less" scoped>
.distribution {
  width: 1124px;
  height: auto;
  border-radius: 16px;
  padding: 20px;
  border-radius: 16px;

  &_title {
    font-family: PingFang SC;
    font-size: 24px;
    font-weight: 400;
    line-height: 24px;
  }

  &_view {
    width: 1084px;
    height: 58px;
    border-radius: 8px;
    padding: 20px;
    background: #0070E9;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    &_left {
      img {
        width: 20px;
        height: 20px;
      }

      view {
        font-family: PingFang SC;

        font-weight: 400;
        line-height: 16px;
      }
    }

    &_right {
      img {
        width: 24px;
        height: 24px;
      }
    }
  }
}

.order {
  width: 1124px;
  height: auto;
  border-radius: 16px;
  padding: 20px;
  border-radius: 16px;

  .table {
    width: 1084px;
    //height: 337px;
    border-radius: 8px;
    border: 1px solid #CCCCCC;

    .tr {
      padding: 20px;
      background: #F6F6F6;
      font-family: PingFang SC;
      font-size: 12px;
      font-weight: 400;
      line-height: 12px;

      .td_1 {
        //width: 50%;
        flex: 1;
      }

      .td_2 {
        width: 20%;
        text-align: center;
      }

      .td_3 {
        width: 20%;
        text-align: center;
      }

      .td_4 {
        width: 20%;
        text-align: center;
      }
    }

    .tr_1 {
      margin: 20px 20px 0 20px;
      padding-bottom: 20px;
      border-bottom: 1px solid #EEEEEE ;
      font-family: PingFang SC;
      font-size: 12px;
      font-weight: 400;
      line-height: 12px;

      .th_1 {
        flex: 1;
        display: flex;
        box-sizing: border-box;
        padding-right: 50px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 13px;
        color: #333333;
        line-height: 16px;
        text-align: left;
        font-style: normal;
        text-transform: none;
        img{
          width: 64px;
          height: 64px;
          background: #F6F6F6;
          border-radius: 4px 4px 4px 4px;
          margin-right: 16px;
        }

      }

      .th_2 {
        width: 20%;
        text-align: center;

        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 11px;
        color: #999999;
        line-height: 11px;
        font-style: normal;
        text-transform: none;
      }

      .th_3 {
        width: 20%;
        text-align: center;

        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 14px;
        color: #333333;
        line-height: 14px;
        font-style: normal;
        text-transform: none;
      }

      .th_4 {
        width: 20%;
        text-align: center;
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 16px;
        color: #F83C57;
        line-height: 16px;
        font-style: normal;
        text-transform: none;
      }
    }
  }
}

.xiangqing{
  width: 1124px;
  height: auto;
  border-radius: 16px;
  padding: 20px;
  border-radius: 16px;
  .title{
    display: flex;
    align-items: center;
    padding-bottom: 16px;
    border-bottom: 1px solid #EEEEEE;
    img{
      width: 22px;
      height: 22px;
    }
    .text{
      margin-left: 8px;
      font-family: Segoe UI, Segoe UI;
      font-weight: bold;
      font-size: 16px;
      color: #333333;
      line-height: 16px;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
  }
  .listBox{
    .item{
      display: flex;
      justify-content: space-between;
      margin-top: 20px;
      .name{
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 14px;
        color: #333333;
        line-height: 14px;
        text-align: left;
        font-style: normal;
        text-transform: none;
      }
      .text{
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 14px;
        color: #F83C57;
        line-height: 14px;
        text-align: right;
        font-style: normal;
        text-transform: none;
      }
    }
  }
}
.tedxing{
  width: 1124px;
  height: auto;
  border-radius: 16px;
  padding: 20px;
  border-radius: 16px;
  .title{
    display: flex;
    align-items: center;
    padding-bottom: 16px;
    border-bottom: 1px solid #EEEEEE;
    img{
      width: 22px;
      height: 22px;
    }
    .text{
      margin-left: 8px;
      font-family: Segoe UI, Segoe UI;
      font-weight: bold;
      font-size: 16px;
      color: #333333;
      line-height: 16px;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
  }
  .listBox{
    .item{
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 14px;
      color: #333333;
      line-height: 14px;
      text-align: left;
      font-style: normal;
      text-transform: none;
      display: flex;
      margin-top: 20px;
    }
  }
}
.BtnBox{
  width: 1124px;
  height: auto;
  border-radius: 16px;
  padding: 20px;
  border-radius: 16px;
  display: flex;
  justify-content: right;
  .hem{
    background-color: #0070E9;
    color: white;
  }
  .btn{
    padding: 13px 40px;
    border-radius: 10px 10px 10px 10px;
    border: 1px solid #CCCCCC;
    margin-left: 23px;
    cursor: pointer;
  }
}
</style>
